@extends('manage.layout')
@section('link')
    {{--<link rel="stylesheet" type="text/css" href="/echarts/css/bootstrap.min.css"/>--}}
    <link rel="stylesheet" type="text/css" href="/plugin/echarts/css/eStyle.css"/>
    <script src="/plugin/echarts/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="/plugin/echarts/js/echarts.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="/plugin/echarts/js/eScript.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
    <style>
        .table > thead > tr > th,
        .table > tbody > tr > th,
        .table > tfoot > tr > th,
        .table > thead > tr > td,
        .table > tfoot > tr > td,
        .table > tbody > tr > td{
            border-top: solid 1px #f4f4f4 !important;
        }


        .table > thead > tr > th{

            border-bottom: solid 3px #f4f4f4 !important;
        }

    </style>
@endsection
@section('content')

<!-- Content Header (Page header) -->
<section class="content-header">
    <h1>
        艺点设计官网后台
        <small>欢迎登录</small>
    </h1>
    <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> 仪表盘</a></li>
        <li class="active">Here</li>
    </ol>
</section>
<!-- Main content -->
<section class="content">
    <div id="eMain" class="container-fluid">
        <div id="eRow1" class="container-fluid">
            <div class="row">
                <div id="r1k1" class="col-xs-6 col-md-3">
                    <h3>销售额</h3>
                    <div id="r1k1box">
                        <img src="/plugin/echarts/img/d1p1.png"/>
                        <span class="glyphicon glyphicon-triangle-bottom" style="cursor: pointer;">
								$942
							</span>
                    </div>
                </div>
                <div id="r1k2" class="col-xs-6 col-md-3">
                    <h3>销售订单</h3>
                    <div id="r1k2box">
                        <img src="/plugin/echarts/img/d1p2.jpg"/>
                        <span class="glyphicon glyphicon-triangle-bottom" style="cursor: pointer;">
								99%
							</span>
                    </div>
                </div>
                <div id="r1k3" class="col-xs-6 col-md-3">
                    <h3>客户数</h3>
                    <div id="r1k3box">
                        <img src="/plugin/echarts/img/d1p3.jpg"/>
                        <span class="glyphicon glyphicon-triangle-top" style="cursor: pointer;">
								67&nbsp;
							</span>
                    </div>
                </div>
                <div id="r1k4" class="col-xs-6 col-md-3">
                    <h3>集团员工</h3>
                    <div id="r1k4box">
                        <img src="/plugin/echarts/img/d1p3.jpg"/>
                        <span class="glyphicon glyphicon-triangle-top" style="cursor: pointer;">
								356
							</span>
                    </div>
                </div>
            </div>
        </div>

        <div id="eRow2" class="container-fluid">
            <div class="row">
                <div class="col-xs-6 col-md-3">
                    <div id="r2chart1">

                    </div>
                    <p>行业分布</p>
                </div>
                <div class="col-xs-6 col-md-3">
                    <div id="r2chart2">

                    </div>
                    <p>产品分布</p>
                </div>
                <div class="col-xs-6 col-md-3">
                    <div id="r2chart3">

                    </div>
                    <p>销售额统计</p>
                </div>
                <div class="col-xs-6 col-md-3">
                    <div id="r2chart4">

                    </div>
                    <p>订单统计</p>
                </div>
            </div>
        </div>

        <div id="eRow3" class="container-fluid">
            <div id="r3box">
                <div class="row">
                    <div class="col-xs-12 col-md-7">
                        <div id="r3chart1">

                        </div>
                    </div>
                    <div class="col-xs-12 col-md-5">
                        <div id="r3textbox">

                            <span class="glyphicon glyphicon-menu-left fonxlg">2017.4</span><span class="glyphicon glyphicon-menu-right fonxlg"></span>


                            <div style="float: right; margin-right: 20px;"><span class="fonxlg">季度</span></div>
                        </div>

                        <table class="table table-hover">
                            <thead>
                            <tr>
                                <th>区域</th>
                                <th>订单数</th>
                                <th>金额</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td>河北省</td>
                                <td>50</td>
                                <td>135万</td>
                            </tr>
                            <tr>
                                <td>天津市</td>
                                <td>48</td>
                                <td>85万</td>
                            </tr>
                            <tr>
                                <td>上海市</td>
                                <td>40</td>
                                <td>200万</td>
                            </tr>
                            <tr>
                                <td>北京市</td>
                                <td>37</td>
                                <td>150万</td>
                            </tr>
                            <tr>
                                <td>四川省</td>
                                <td>36</td>
                                <td>30万</td>
                            </tr>
                            <tr>
                                <td>山东省</td>
                                <td>33</td>
                                <td>45万</td>
                            </tr>
                            <tr>
                                <td>浙江省</td>
                                <td>20</td>
                                <td>40万</td>
                            </tr>
                            <tr>
                                <td>广东省</td>
                                <td>6</td>
                                <td>10万</td>
                            </tr>
                            <tr>
                                <td>吉林省</td>
                                <td>3</td>
                                <td>2万</td>
                            </tr>
                            <tr>
                                <td>共计</td>
                                <td>273</td>
                                <td>697万</td>
                            </tr>
                            </tbody>
                        </table>



                    </div>
                </div>

            </div>
        </div>

        <div id="eRow4" class="container-fluid">
            <div id="r4box">
                <div class="row">
                    <div class="col-xs-6 col-md-4">
                        <div id="r4chart1">

                        </div>
                        <p>合同款</p>
                    </div>
                    <div class="col-xs-6 col-md-4">
                        <div id="r4chart2">

                        </div>
                        <p>销售回款</p>
                    </div>
                    <div class="clearfix visible-xs"></div>
                    <div class="col-xs-6 col-md-4">
                        <div id="r4chart3">

                        </div>
                        <p>平均订单周期</p>
                    </div>


                </div>

            </div>
        </div>

        <div id="eRow5" class="container-fluid">
            <div class="row">
                <div class="col-xs-6 col-md-4">
                    <table class="table table-hover">
                        <thead>
                        <tr>
                            <th>企业公告</th>
                            <th></th>
                            <th></th>
                        </tr>

                        </thead>
                        <tbody>
                        <tr>
                            <td>欢乐谷宣传</td>
                            <td>洽谈</td>
                            <td>2017.4.12</td>
                        </tr>
                        <tr>
                            <td>欢乐谷宣传</td>
                            <td>洽谈</td>
                            <td>2017.4.12</td>
                        </tr>
                        <tr>
                            <td>欢乐谷宣传</td>
                            <td>洽谈</td>
                            <td>2017.4.12</td>
                        </tr>
                        <tr>
                            <td>欢乐谷宣传</td>
                            <td>洽谈</td>
                            <td>2017.4.12</td>
                        </tr>
                        <tr>
                            <td>欢乐谷宣传</td>
                            <td>洽谈</td>
                            <td>2017.4.12</td>
                        </tr>
                        <tr>
                            <td>欢乐谷宣传</td>
                            <td>洽谈</td>
                            <td>2017.4.12</td>
                        </tr>
                        <tr>
                            <td>欢乐谷宣传</td>
                            <td>洽谈</td>
                            <td>2017.4.12</td>
                        </tr>
                        </tbody>

                    </table>
                </div>

                <div class="col-xs-6 col-md-4">
                    <table class="table table-hover">
                        <thead>
                        <tr>
                            <th>销售活动</th>
                            <th></th>
                            <th></th>
                        </tr>

                        </thead>
                        <tbody>
                        <tr>
                            <td>欢乐谷宣传</td>
                            <td>洽谈</td>
                            <td>2017.4.12</td>
                        </tr>
                        <tr>
                            <td>欢乐谷宣传</td>
                            <td>洽谈</td>
                            <td>2017.4.12</td>
                        </tr>
                        <tr>
                            <td>欢乐谷宣传</td>
                            <td>洽谈</td>
                            <td>2017.4.12</td>
                        </tr>
                        <tr>
                            <td>欢乐谷宣传</td>
                            <td>洽谈</td>
                            <td>2017.4.12</td>
                        </tr>
                        <tr>
                            <td>欢乐谷宣传</td>
                            <td>洽谈</td>
                            <td>2017.4.12</td>
                        </tr>
                        <tr>
                            <td>欢乐谷宣传</td>
                            <td>洽谈</td>
                            <td>2017.4.12</td>
                        </tr>
                        <tr>
                            <td>欢乐谷宣传</td>
                            <td>洽谈</td>
                            <td>2017.4.12</td>
                        </tr>
                        </tbody>

                    </table>
                </div>
                <div class="clearfix visible-xs"></div>
                <div class="col-xs-6 col-md-4">
                    <table class="table table-hover">
                        <thead>
                        <tr>
                            <th>最新审批</th>
                            <th></th>
                            <th></th>
                        </tr>

                        </thead>
                        <tbody>
                        <tr>
                            <td>欢乐谷宣传</td>
                            <td>洽谈</td>
                            <td>2017.4.12</td>
                        </tr>
                        <tr>
                            <td>欢乐谷宣传</td>
                            <td>洽谈</td>
                            <td>2017.4.12</td>
                        </tr>
                        <tr>
                            <td>欢乐谷宣传</td>
                            <td>洽谈</td>
                            <td>2017.4.12</td>
                        </tr>
                        <tr>
                            <td>欢乐谷宣传</td>
                            <td>洽谈</td>
                            <td>2017.4.12</td>
                        </tr>
                        <tr>
                            <td>欢乐谷宣传</td>
                            <td>洽谈</td>
                            <td>2017.4.12</td>
                        </tr>
                        <tr>
                            <td>欢乐谷宣传</td>
                            <td>洽谈</td>
                            <td>2017.4.12</td>
                        </tr>
                        <tr>
                            <td>欢乐谷宣传</td>
                            <td>洽谈</td>
                            <td>2017.4.12</td>
                        </tr>
                        </tbody>

                    </table>
                </div>

            </div>
        </div>



    </div>
</section>
<!--beginning of 第二块表1-->

<script type="text/javascript">
    var myChart21 = echarts.init(document.getElementById('r2chart1'));
    myChart21.setOption({
        series : [
            {
                name: '访问来源',
                type: 'pie',
                radius: '55%',
                data:[
                    {value:235, name:'视频广告'},
                    {value:274, name:'联盟广告'},
                    {value:310, name:'邮件营销'},
                    {value:335, name:'直接访问'},
                    {value:400, name:'搜索引擎'}
                ]
            }
        ]
    })
//    myChart21.setOption(option);
</script>



<!--end of 第二块表1-->


<!--beginning of 第二块表2-->

<script type="text/javascript">
    var myChart22 = echarts.init(document.getElementById('r2chart2'));
    myChart22.setOption({
        series : [
            {
                name: '访问来源',
                type: 'pie',
                radius: '55%',
                data:[
                    {value:235, name:'视频广告'},
                    {value:274, name:'联盟广告'},
                    {value:310, name:'邮件营销'},
                    {value:335, name:'直接访问'},
                    {value:400, name:'搜索引擎'}
                ]
            }
        ]
    })
//    myChart22.setOption(option);
</script>



<!--end of 第二块表2-->


<!--beginning of 第二块表3-->
<script type="text/javascript">
    var myChart23 = echarts.init(document.getElementById('r2chart3'));
    option = {
        /*title : {
         text: '某地区蒸发量和降水量',
         subtext: '纯属虚构'
         },*/
        tooltip : {
            trigger: 'axis'
        },
        legend: {
            data:['订单','销售']
        },
        /*toolbox: {
         show : true,
         feature : {
         mark : {show: true},
         dataView : {show: true, readOnly: false},
         magicType : {show: true, type: ['line', 'bar']},
         restore : {show: true},
         saveAsImage : {show: true}
         }
         },*/
        calculable : true,
        xAxis : [
            {
                type : 'category',
                data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
            }
        ],
        yAxis : [
            {
                type : 'value'
            }
        ],
        series : [
            {
                name:'订单',
                type:'bar',
                data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
                /*markPoint : {
                 data : [
                 {type : 'max', name: '最大值'},
                 {type : 'min', name: '最小值'}
                 ]
                 },
                 markLine : {
                 data : [
                 {type : 'average', name: '平均值'}
                 ]
                 }*/
            },
            {
                name:'销售',
                type:'bar',
                data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
                /*markPoint : {
                 data : [
                 {name : '年最高', value : 182.2, xAxis: 7, yAxis: 183, symbolSize:18},
                 {name : '年最低', value : 2.3, xAxis: 11, yAxis: 3}
                 ]
                 },
                 markLine : {
                 data : [
                 {type : 'average', name : '平均值'}
                 ]
                 }*/
            }
        ]
    };

    myChart23.setOption(option);
</script>

<!--end of 第二块表3-->

<!--beginning of 第二块表4-->
<script type="text/javascript">
    var myChart24 = echarts.init(document.getElementById('r2chart4'));
    option = {
        /*title : {
         text: '某地区蒸发量和降水量',
         subtext: '纯属虚构'
         },*/
        tooltip : {
            trigger: 'axis'
        },
        legend: {
            data:['订单','销售']
        },
        /*toolbox: {
         show : true,
         feature : {
         mark : {show: true},
         dataView : {show: true, readOnly: false},
         magicType : {show: true, type: ['line', 'bar']},
         restore : {show: true},
         saveAsImage : {show: true}
         }
         },*/
        calculable : true,
        xAxis : [
            {
                type : 'category',
                data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
            }
        ],
        yAxis : [
            {
                type : 'value'
            }
        ],
        series : [
            {
                name:'订单',
                type:'bar',
                data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
                /*markPoint : {
                 data : [
                 {type : 'max', name: '最大值'},
                 {type : 'min', name: '最小值'}
                 ]
                 },
                 markLine : {
                 data : [
                 {type : 'average', name: '平均值'}
                 ]
                 }*/
            },
            {
                name:'销售',
                type:'bar',
                data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
                /*markPoint : {
                 data : [
                 {name : '年最高', value : 182.2, xAxis: 7, yAxis: 183, symbolSize:18},
                 {name : '年最低', value : 2.3, xAxis: 11, yAxis: 3}
                 ]
                 },
                 markLine : {
                 data : [
                 {type : 'average', name : '平均值'}
                 ]
                 }*/
            }
        ]
    };

    myChart24.setOption(option);
</script>

<!--end of 第二块表4-->


<!--beginning of 第四块表1-->
<script type="text/javascript">
    var myChart41 = echarts.init(document.getElementById('r4chart1'));
    option = {
        /*title : {
         text: '未来一周气温变化',
         subtext: '纯属虚构'
         },*/
        tooltip : {
            trigger: 'axis'
        },
        legend: {
            data:['实际','预期']
        },
        /*toolbox: {
         show : true,
         feature : {
         mark : {show: true},
         dataView : {show: true, readOnly: false},
         magicType : {show: true, type: ['line', 'bar']},
         restore : {show: true},
         saveAsImage : {show: true}
         }
         },*/
        calculable : true,
        xAxis : [
            {
                type : 'category',
                boundaryGap : false,
                data : ['周一','周二','周三','周四','周五','周六','周日']
            }
        ],
        yAxis : [
            {
                type : 'value',
                axisLabel : {
                    formatter: '{value} °C'
                }
            }
        ],
        series : [
            {
                name:'实际',
                type:'line',
                data:[11, 11, 15, 13, 12, 13, 10],
                /* markPoint : {
                 data : [
                 {type : 'max', name: '最大值'},
                 {type : 'min', name: '最小值'}
                 ]
                 },
                 markLine : {
                 data : [
                 {type : 'average', name: '平均值'}
                 ]
                 }*/
            },
            {
                name:'预期',
                type:'line',
                data:[1, -2, 2, 5, 3, 2, 0],
                /*markPoint : {
                 data : [
                 {name : '周最低', value : -2, xAxis: 1, yAxis: -1.5}
                 ]
                 },
                 markLine : {
                 data : [
                 {type : 'average', name : '平均值'}
                 ]
                 }*/
            }
        ]
    };

    myChart41.setOption(option);
</script>
<!--end of 第四块表1-->


<!--beginning of 第四块表2-->
<script type="text/javascript">
    var myChart42 = echarts.init(document.getElementById('r4chart2'));
    option = {
        /*title : {
         text: '未来一周气温变化',
         subtext: '纯属虚构'
         },*/
        tooltip : {
            trigger: 'axis'
        },
        legend: {
            data:['实际','预期']
        },
        /*toolbox: {
         show : true,
         feature : {
         mark : {show: true},
         dataView : {show: true, readOnly: false},
         magicType : {show: true, type: ['line', 'bar']},
         restore : {show: true},
         saveAsImage : {show: true}
         }
         },*/
        calculable : true,
        xAxis : [
            {
                type : 'category',
                boundaryGap : false,
                data : ['周一','周二','周三','周四','周五','周六','周日']
            }
        ],
        yAxis : [
            {
                type : 'value',
                axisLabel : {
                    formatter: '{value} °C'
                }
            }
        ],
        series : [
            {
                name:'实际',
                type:'line',
                data:[11, 11, 15, 13, 12, 13, 10],
                /* markPoint : {
                 data : [
                 {type : 'max', name: '最大值'},
                 {type : 'min', name: '最小值'}
                 ]
                 },
                 markLine : {
                 data : [
                 {type : 'average', name: '平均值'}
                 ]
                 }*/
            },
            {
                name:'预期',
                type:'line',
                data:[1, -2, 2, 5, 3, 2, 0],
                /*markPoint : {
                 data : [
                 {name : '周最低', value : -2, xAxis: 1, yAxis: -1.5}
                 ]
                 },
                 markLine : {
                 data : [
                 {type : 'average', name : '平均值'}
                 ]
                 }*/
            }
        ]
    };

    myChart42.setOption(option);
</script>
<!--end of 第四块表1-->

<!--beginning of 第四块表3-->
<script type="text/javascript">
    var myChart43 = echarts.init(document.getElementById('r4chart3'));
    option = {
        /*title : {
         text: '未来一周气温变化',
         subtext: '纯属虚构'
         },*/
        tooltip : {
            trigger: 'axis'
        },
        legend: {
            data:['实际','预期']
        },
        /*toolbox: {
         show : true,
         feature : {
         mark : {show: true},
         dataView : {show: true, readOnly: false},
         magicType : {show: true, type: ['line', 'bar']},
         restore : {show: true},
         saveAsImage : {show: true}
         }
         },*/
        calculable : true,
        xAxis : [
            {
                type : 'category',
                boundaryGap : false,
                data : ['周一','周二','周三','周四','周五','周六','周日']
            }
        ],
        yAxis : [
            {
                type : 'value',
                axisLabel : {
                    formatter: '{value} °C'
                }
            }
        ],
        series : [
            {
                name:'实际',
                type:'line',
                data:[11, 11, 15, 13, 12, 13, 10],
                /* markPoint : {
                 data : [
                 {type : 'max', name: '最大值'},
                 {type : 'min', name: '最小值'}
                 ]
                 },
                 markLine : {
                 data : [
                 {type : 'average', name: '平均值'}
                 ]
                 }*/
            },
            {
                name:'预期',
                type:'line',
                data:[1, -2, 2, 5, 3, 2, 0],
                /*markPoint : {
                 data : [
                 {name : '周最低', value : -2, xAxis: 1, yAxis: -1.5}
                 ]
                 },
                 markLine : {
                 data : [
                 {type : 'average', name : '平均值'}
                 ]
                 }*/
            }
        ]
    };

    myChart43.setOption(option);
</script>
<!--end of 第四块表3-->





<!--beginning of 第三块图表 地图-->
<script type="text/javascript">
    var dom = document.getElementById("r3chart1");
    var myChart31 = echarts.init(dom);
    var app = {};
    option = null;
    var data = [
        {name: '上海', value: 200},
        {name: '广东省', value: 10},
        {name: '吉林省', value: 2},
        {name: '四川省', value: 30},
        {name: '北京', value: 150},
        {name: '浙江省', value: 40},
        {name: '山东省', value: 45},
        {name: '天津', value: 85},
        {name: '河北省', value: 135}
    ];
    var geoCoordMap = {
        '上海':[121.48,31.22],
        '广东省':[113.23,23.16],
        '吉林省':[125.35,43.88],
        '四川省':[104.06,30.67],
        '北京':[116.46,39.92],
        '浙江省':[120.19,30.26],
        '山东省':[117,36.65],
        '天津':[117.2,39.13],
        '河北省':[114.48,38.03]
    };

    var convertData = function (data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
            var geoCoord = geoCoordMap[data[i].name];
            if (geoCoord) {
                res.push({
                    name: data[i].name,
                    value: geoCoord.concat(data[i].value)
                });
            }
        }
        return res;
    };

    option = {
        backgroundColor: '#404a59',
        title: {
            text: '全国范围月订单金额',
            subtext: 'Monthly Order Amount',
            //sublink: 'http://www.pm25.in',
            left: 'center',
            textStyle: {
                color: '#fff'
            }
        },
        tooltip : {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            y: 'bottom',
            x:'right',
            data:['放大显示'],
            textStyle: {
                color: '#fff'
            }
        },
        geo: {
            map: 'china',
            label: {
                emphasis: {
                    show: false
                }
            },
            roam: true,
            itemStyle: {
                normal: {
                    areaColor: '#323c48',
                    borderColor: '#111'
                },
                emphasis: {
                    areaColor: '#2a333d'
                }
            }
        },
        series : [
            {
                name: '放大显示',
                type: 'scatter',
                coordinateSystem: 'geo',
                data: convertData(data),
                symbolSize: function (val) {
                    return val[2] / 10;
                },
                label: {
                    normal: {
                        formatter: '{b}',
                        position: 'right',
                        show: false
                    },
                    emphasis: {
                        show: true
                    }
                },
                itemStyle: {
                    normal: {
                        color: '#ddb926'
                    }
                }
            },
            {
                name: 'Top 5',
                type: 'effectScatter',
                coordinateSystem: 'geo',
                data: convertData(data.sort(function (a, b) {
                    return b.value - a.value;
                }).slice(0, 6)),
                symbolSize: function (val) {
                    return val[2] / 10;
                },
                showEffectOn: 'render',
                rippleEffect: {
                    brushType: 'stroke'
                },
                hoverAnimation: true,
                label: {
                    normal: {
                        formatter: '{b}',
                        position: 'right',
                        show: true
                    }
                },
                itemStyle: {
                    normal: {
                        color: '#f4e925',
                        shadowBlur: 10,
                        shadowColor: '#333'
                    }
                },
                zlevel: 1
            }
        ]
    };
    if (option && typeof option === "object") {
        myChart31.setOption(option, true);
    }
</script>
<!--end of 第三块图表 地图-->
<!-- /.content -->
@endsection
